<!--
 * @Author: HeAo
 * @Date: 2022-08-10 15:04:49
 * @LastEditTime: 2022-08-14 21:53:20
 * @LastEditors: HeAo
 * @Description: 
 * @FilePath: \JavaScripe\day-04\03-双向数据绑定.html
 * 别乱动！
-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <!-- 实现双向数据绑定 input输入的东西  在div中显示-->
  <input type="text" name="" id="inputText">
  <div id="showContent"></div>
  <script>
    // 1、创建一个数据容器对象
    var dataObj = {}
    // 2、新增对象属性 接收input输入的值
    Object.defineProperty(dataObj, 'inputText', {
      // 当.语法时会触发get
      get: function () {
        return 10

      },
      // 当给新增属性：值或者修改已有属性的值时 触发set
      set: function (newValue) {
        // 4、将3获取到的值 赋值到div里面
        document.getElementById('showContent').innerHTML = newValue

      }
    })

    // 3、获取值input中输入的值 使用dom getElementById-获取id 
    document.getElementById('inputText').addEventListener('input', function (event) {
      // console.log(event.target.value);
      // 将获取的值传给给新增属性赋值 
      dataObj.inputText = event.target.value

    })
  </script>

</body>

</html>